<template>
  <div class="e-wrap">
    <div class="e-filter-options clearfix">
      <div class="e-filter">
        <div class="e-item">
          <span class="title">广告名称</span>
          <div class="date dis-block">
            <w-input :holder='`请填写`' v-model='queryParams.adTitle'></w-input>
          </div>
        </div>
      </div>
      <div class="e-btn">
        <w-button @on-click='changePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 广告列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click='$router.push(`/advertMange/add?three=${$route.query.three}`)'>新增广告</w-button>
      </div>
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if='advertList.totalCount'>
        <table>
          <tr class="table-h">
            <th>广告名称</th>
            <th>所属广告位</th>
            <th>类别</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <!-- <th>点击次数</th> -->
            <th>广告状态</th>
            <!-- <th>广告上传操作人</th> -->
            <th>操作</th>
          </tr>
          <tr v-for='(val, index) in advertList.recordList' :key='index'>
            <td>{{val.adTitle}}</td>
            <td>{{val.adApTitle}}</td>
            <!-- <td>{{val.apType}}</td> -->
            <td v-if="val.apType == 'img'">图片</td>
            <td v-else-if="val.apType == 'slide'">幻灯片</td>
            <td v-else-if="val.apType == 'bg_slide'">背景幻灯片</td>
            <td v-else-if="val.apType == 'scroll'">滚动</td>
            <td v-else-if="val.apType == 'text'">文字</td>
            <td v-else></td>
            <td>{{val.adBeginTime}}</td>
            <td>{{val.adEndTime}}</td>
            <!-- <td>{{val.adClickNum || 0}}</td> -->

            <!-- 广告状态暂时固定 审核通过 -->
            <!-- <td>{{val.adStatus == '1' ? '审核通过' : val.adStatus == '-1' ? '审核未通过' : '待审核'}} </td> -->
            <td>审核通过</td>
            
            <!-- <td>{{val.adUserName}}</td> -->
            <td>
              <span class="cur" @click='$router.push(`/advertMange/add?three=${$route.query.three}&id=${val.id}&terminal=${val.terminal}`)'>编辑 |</span>
              <span class="cur" @click="delPanel = true; delParams.idList = [Number(val.id)]">删除</span>
            </td>
          </tr>
        </table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="advertList.currentPage" :total="advertList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>

      <!-- 无数据 -->
      <div class="e-list" v-else>
        <table>
          <tr class="table-h">
            <th>广告名称</th>
            <th>所属广告位</th>
            <th>类别</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <!-- <th>点击次数</th> -->
            <th>广告状态</th>
            <th>广告上传操作人</th>
            <th>操作</th>
          </tr>
          <tr>
            <td colspan='8'>暂无数据</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 删除广告 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除广告" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该广告
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiDecorateMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      delPanel: false,
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        adTitle: '',
        currentPage: 1,
        showCount: 10
      },
      advertList: {},
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this._getAdvertList()
  },
  methods: {
    // 获取 广告 列表
    _getAdvertList() {
      this.queryParams.accessToken = this.token
      apiDecorateMange.getAdvertList(this.queryParams).then(data => {
        this.advertList = data.data
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getAdvertList()
    },
    delOption(page) {
      this.delParams.accessToken = this.token
      apiDecorateMange.delAdvert(this.delParams).then(data => {
        if (data.code != 200) return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
    border-bottom: 1px solid $border-gray-light;
    padding-bottom: 20px;
}
.e-item {
    margin-left: 0;
    margin-right: 20px;
    .dis-block {
      width: 240px;
      vertical-align: middle;
    }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
  }
}
</style>